<template>
  <div>
    <el-form :inline="true" :model="operForm">
      <el-form-item label="单号">
        <el-input
          size="small"
          disabled
          v-model="operForm.stockOper.recordNo"
        ></el-input>
      </el-form-item>
      <el-form-item label="操作方式">
        <el-select
          size="small"
          disabled
          v-model="operForm.stockOper.operType"
          placeholder=""
        >
          <!--根据字典表生成下拉选项-->
          <el-option
            v-for="(label, value) in drugDict.oper"
            :key="value"
            :label="label"
            :value="Number(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人员">
        <el-select size="small" disabled v-model="user.id" placeholder="">
          <!--根据字典表生成下拉选项-->
          <el-option
            v-for="(label, value) in employeeDict"
            :key="value"
            :label="label"
            :value="Number(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table
      size="small"
      :data="stagingMedicineList"
      highlight-current-row
      border
      style="width: 100%"
    >
      <el-table-column sortable prop="code" label="编码" width="100">
      </el-table-column>
      <el-table-column sortable prop="commonName" label="药品名称" width="200">
      </el-table-column>
      <el-table-column sortable prop="factoryId" label="生产厂家" width="200">
        <template slot-scope="scope">
          <div>{{ drugDict.factory[scope.row.factoryId] }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="cost" label="单价" width="100">
        <template slot-scope="scope">
          <!--将查到的价格(单位:分)转换单位(元)进行显示-->
          <div>{{ scope.row.cost / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="waterMark" label="当前库存" width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.waterMark }} {{ drugDict.unit[scope.row.unitId] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="quantity" label="操作数量" width="170">
        <template slot-scope="scope">
          <el-input-number
            size="mini"
            :min="1"
            v-model="scope.row.quantity"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column sortable prop="totalPrice" label="金额" width="80">
        <template slot-scope="scope">
          <div>
            {{ (scope.row.cost * scope.row.quantity) / 100 }}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deleteMedicine(scope.$index, scope.row)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <br /><br />
    <el-form :inline="true">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="addMedicine"
          >添加</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-check"
          @click="submitOper"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 添加药品对话框 -->

    <el-dialog
      title="添加药品"
      :visible.sync="medicineDialogVisible"
      width="850px"
      @click="closeDialog"
    >
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="searchForm" class="user-search">
        <el-form-item label="药品类型：">
          <!-- 可清空下拉框 -->
          <el-select
            style="width: 120px"
            size="small"
            clearable
            v-model="searchForm.drugClassId"
            placeholder=""
          >
            <!--根据字典表生成下拉选项-->
            <el-option
              v-for="(label, value) in drugDict.class"
              :key="value"
              :label="label"
              :value="Number(value)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字：">
          <el-input
            size="small"
            v-model="searchForm.keyword"
            placeholder="输入药品名称/药品编码/拼音"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        size="small"
        :data="medicineList"
        highlight-current-row
        border
        style="width: 100%"
      >
        <el-table-column sortable prop="code" label="编码" width="100">
        </el-table-column>
        <el-table-column
          sortable
          prop="commonName"
          label="药品名称"
          width="200"
        >
        </el-table-column>
        <el-table-column sortable prop="factoryId" label="生产厂家" width="200">
          <template slot-scope="scope">
            <div>{{ drugDict.factory[scope.row.factoryId] }}</div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="waterMark" label="当前库存" width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.waterMark }} {{ drugDict.unit[scope.row.unitId] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="cost" label="单价" width="100">
          <template slot-scope="scope">
            <!--将查到的价格(单位:分)转换单位(元)进行显示-->
            <div>{{ scope.row.cost / 100 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="60">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="pushMedicine(scope.$index, scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="handlePageEvent"
      ></Pagination>
    </el-dialog>
  </div>
</template>

<script>
// 引入药品类型字典
import { drugDict } from "../../dict/drugDict";
import Pagination from "../../components/Pagination";
import DateTimeRange from "../../components/DateTimeRange";
// 引入 Axios
import axios from "axios";
import { Dropdown } from "element-ui";

export default {
  props: ["operType", "recordNo", "employeeDict"],
  data() {
    return {
      loading: false,
      medicineDialogVisible: false, //对话框显示隐藏
      // 搜索框数据
      searchForm: {
        keyword: "",
        drugClassId: null,
        dateTimeRange: null,
      },
      medicineList: [], //药品数据
      // 分页参数
      pageparm: {
        pageNum: 1,
        pageSize: 10,
        total: 10,
      },
      user: JSON.parse(localStorage.getItem("userdata")),
      //待操作的药品列表
      stagingMedicineList: [],
      operForm: {
        operMedicineList: [],
        stockOper: {
          operType: Number(this.operType),
          operator: 1,
          recordNo: this.recordNo,
        },
      },
      drugDict: drugDict, // 药品相关字典
    };
  },
  // 注册组件
  components: {
    Pagination,
    DateTimeRange,
  },
  /**
   * 数据发生改变
   */
  watch: {
    recordNo: {
      deep: true,
      handler(newValue, oldValue) {
        this.operForm.stockOper.recordNo = newValue;
      },
    },
  },
  /**
   * 创建完毕
   */
  created() {},

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    search() {
      this.pageparm.pageNum = 1;
      this.getData();
    },
    // 提交库存操作
    submitOper() {
      if (this.stagingMedicineList.length === 0) {
        this.$message.error("请先添加药品");
        return;
      }
      this.$confirm("确定数据无误?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 处理表单数据
          this.operForm.stockOper.operator = this.user.id;
          this.operForm.operMedicineList = [];
          for (let medicine of this.stagingMedicineList) {
            this.operForm.operMedicineList.push({
              medicineId: medicine.id,
              operPrice: medicine.cost,
              quantity: medicine.quantity,
            });
          }
          // 发送请求
          axios
            .post("/api/stockOper/insert", this.operForm)
            .then((res) => {
              if (res.data !== undefined && res.data.code === 200) {
                this.$message({
                  type: "success",
                  message: "成功提交!",
                });
                this.stagingMedicineList = [];
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("提交失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    // 获取数据
    getData() {
      this.loading = true;
      // 待提交的数据
      let dto = {
        pageNum: this.pageparm.pageNum,
        pageSize: this.pageparm.pageSize,
      };
      // 根据 this.searchForm 进行构建 dto
      if (this.searchForm.keyword !== "")
        dto.keywords = this.searchForm.keyword;
      if (this.searchForm.drugClassId !== null) {
        if (dto.medicine === undefined) dto.medicine = {};
        dto.medicine.classId = this.searchForm.drugClassId;
      }
      if (this.searchForm.dateTimeRange !== null) {
        dto.startDate = this.searchForm.dateTimeRange[0];
        dto.endDate = this.searchForm.dateTimeRange[1];
      }
      // 发送请求
      axios
        .post("/api/medicine/select", dto)
        .then((res) => {
          if (res.data.data == null) {
            throw "error";
          }
          return res.data.data;
        })
        .then((data) => {
          this.medicineList = data.list;
          this.pageparm.pageNum = data.pageNum;
          this.pageparm.pageSize = data.pageSize;
          this.pageparm.total = data.total;
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });

      this.loading = false;
    },
    // 时间段选择事件
    handleDateTimeRange(param) {
      this.searchForm.dateTimeRange = param;
    },
    addMedicine() {
      this.search();
      this.medicineDialogVisible = true;
    },
    closeDialog() {
      this.medicineDialogVisible = false;
    },
    // 移除表单药品
    deleteMedicine(index, row) {
      let b = this.stagingMedicineList.indexOf(row);
      this.stagingMedicineList.splice(b, 1);
    },
    pushMedicine(index, row) {
      this.stagingMedicineList.push({
        id: row.id,
        code: row.code,
        commonName: row.commonName,
        factoryId: row.factoryId,
        cost: row.cost,
        unitId: row.unitId,
        waterMark: row.waterMark,
        quantity: 1,
      });
      this.closeDialog();
    },
    // 分页插件事件
    handlePageEvent(parm) {
      this.pageparm.pageNum = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.getData();
    },
  },
};
</script>

<style scoped>
</style>

 
 